<template>
    <div class="six">
        <p>HTML名字中的超文本(HyperText)就是指的在文本中可以存在超链接，通过点击超链接的内容，可以将页面跳转到另一个页面显示另一个页面的内容。</p>
        <p>要植入一个链接，我们需要使用一个标签<code>&lt;a&gt;</code>，是 "anchor" （锚）的缩写。步骤如下：</p>
        <ol>
            <li>
            <p>编写一些文本。比如 <code>世界上第一个网页</code></p>
            </li>
            <li>
            <p>将文本包含在<code>&lt;a&gt;</code>元素内，就像这样：</p>
            <pre><code class="language-html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">a</span>&gt;</span>世界上第一个网页<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
            </code></pre>
            </li>
            <li>
            <p>然后为<code>&lt;a&gt;</code>标签添加一个<code>href</code>属性，属性值为需要跳转的页面地址</p>
            <pre><code class="language-html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://info.cern.ch/"</span>&gt;</span>世界上第一个网页<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
            </code></pre>
            </li>
        </ol>
        <p>这里使用了<code>http://</code>(还有一种是<code>https://</code>)将跳转的路径设置为互联网上面的另一个页面，我们也可以在本地文件夹创建另一个HTML页面，将页面的名字填写到href中，就像<code>&lt;img&gt;</code>中使用本地图片类似(同样，<code>img</code>的<code>src</code>属性同样可以配置一个图片的互联网路径)。</p>
        <p>最后的代码如下</p>
        <pre><code class="hljs xml"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>hello HTML<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"html.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"HTML图片"</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://info.cern.ch/"</span>&gt;</span>世界上第一个网页<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
            </code>
            </pre>
    </div>
</template>
<script>

export default ({
    name:'six',
    data(){
        return{
        }
    },
    methods:{
    }
})
</script>
<style scoped>

.six{
    width: 70%;
    height: 600px;
    color: black;
    margin: 40px auto;
    font-size: 12px;
    overflow: scroll;
}
.six img{
    width: 90%;
}

</style>
